<template>
  <Card>
    <!-- <div ref="dom" class="charts chart-radar" style="height: 490px;margin-top: 8%"></div> -->
    <div
      ref="dom"
      class="charts chart-bar"
      style="height: 490px; margin-top: 8%"
    ></div>
    <!-- <chart-bar :value="chart_bar_data" style="height: 490px;" :text="text" ></chart-bar> -->
    <!-- <chart-radar :value="chart_bar_data" style="height: 490px;" :text="text"></chart-radar> -->
    <!-- <chart-line :value="chart_bar_data" style="height:480px;" :text="text"></chart-line> -->
    <!-- <chart-line style="height: 480px" :value="chart_bar_data6"></chart-line> -->
    <!-- <chart-pies :value="data" :num="num" style="height:480px"></chart-pies> -->
  </Card>
</template>

<script>
import { ChartBar, ChartRadar, ChartLine, ChartPies } from "@/view/visualize/charts";
import echarts from "echarts";
import { on, off } from "@/libs/tools";
import tdTheme from "./dpot.json";
echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "rader",
  components: {
    ChartBar,
    ChartRadar,
    ChartLine,
    ChartPies,
  },
  data() {
    return {
      dom: null,
    };
  },
  methods: {
    initChart() {
      console.log('我来了')
      var symbols = ["path://M250,150 L150,350 L350,350 Z"];
      var bodyMax = 150;
      var labelSetting = {
        normal: {
          show: true,
          position: "outside",
          offset: [0, -20],
          formatter: function (param) {
            console.log(param)
            return ((param.value / bodyMax) * 100).toFixed(0) + "%";
          },
          textStyle: {
            fontSize: 18,
            fontFamily: "Arial",
          },
        },
      };
      var markLineSetting = {
        symbol: "none",
        lineStyle: {
          opacity: 0.3,
        },
        data: [
          {
            type: "max",
            label: {
              formatter: "max: {c}",
            },
          },
          {
            type: "min",
            label: {
              formatter: "min: {c}",
            },
          },
        ],
      };
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return params[0].name + ": " + params[0].value;
          },
        },
        xAxis: {
          data: ["驯鹿", "火箭", "飞机"],
          axisLine: { show: false },
          axisLabel: {
            textStyle: {
              color: "#e54035",
            },
          },
          axisTick: {
            alignWithLabel: true,
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          axisLine: { show: false },
        },
        grid: {
          top: "center",
          height: 230,
        },
        markLine: {
          z: -100,
        },
        series: [
          {
            name: "hill",
            type: "pictorialBar",
            barCategoryGap: "30%",
            symbol: "triangle",
            stack: "总量",
            // label: labelSetting,
            symbolBoundingData: bodyMax,
            symbolClip: true,
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{c}",
                color: "#fff",
                fontSize: 13,
              },
            },
            data: [
              { value: 150, symbol: symbols[0] },
              { value: 13, symbol: symbols[0] },
              { value: 12, symbol: symbols[0] },
            ],
            z: 10,
          },
          {
            name: "s",
            type: "pictorialBar",
            barCategoryGap: "80%",
            symbol: "triangle",
            stack: "总量",
            label: labelSetting,
            symbolClip: true,
            symbolBoundingData: bodyMax,
            z: 10,
            data: [
              { value: 20, symbol: symbols[0] },
              { value: 130, symbol: symbols[0] },
              { value: 2, symbol: symbols[0] },
            ],
          },
          {
            name: "full",
            type: "pictorialBar",
            symbolBoundingData: bodyMax,
            // label: labelSetting,
            stack: "总量",
            animationDuration: 0,
            data: [{ value: 60, symbol: symbols[0] }],
            data: [
              { value: 23, symbol: symbols[0] },
              { value: 13, symbol: symbols[0] },
              { value: 102, symbol: symbols[0] },
            ],
          },
        ],
      };

      this.dom = echarts.init(this.$refs.dom, "tdTheme");
      this.dom.setOption(option);
      on(window, "resize", this.resize);
    },
  },
  mounted() {
    // this.initBar()
    this.initChart();
  },
};
</script>
